<template>
  <footer class="footer_guide border-1px">
    <a href="javascript:;" class="guide_item" @click="goTo('/msite')">
      <span class="item_icon">
        <img :src=msiteSrc>
      </span>
    </a>
    <a href="javascript:;" class="guide_item" @click="goTo('/preferential')">
      <span class="item_icon">
        <img :src=youhuiSrc>
      </span>
    </a>
    <a href="javascript:;" class="guide_item" @click="goTo('/discovery')">
      <span class="item_icon">
        <img :src=faxainSrc>
      </span>
    </a>
  </footer>
</template>

<script>
  const footerGuideUrl = {
    "msiteSrc": require("./images/icon_meifadian_n.png"),
    "msiteSrcH": require("./images/icon_meifadian_h.png"),
    "youhuiSrc": require("./images/icon_xianshiyouhui_n.png"),
    "youhuiSrcH": require("./images/icon_xianshiyouhui_h.png"),
    "faxainSrc": require("./images/icon_wodefaxian_n.png"),
    "faxainSrcH": require("./images/icon_wodefaxian_h.png"),
  };

  export default {
    name: "FooterGuide",
    data() {
      return {
        msiteSrc: footerGuideUrl['msiteSrc'],
        youhuiSrc: footerGuideUrl['youhuiSrc'],
        faxainSrc: footerGuideUrl['faxainSrc']
      }
    },
    mounted() {
      let {msiteSrc, youhuiSrc, faxianSrc} = this;
      const path = this.$route.path;
      this.setPathImg(path);
    },
    methods: {
      goTo(path) {
        this.setPathImg(path);
        this.$router.replace(path);
      },
      setPathImg(path) {
        if (path == '/msite') {
          this.msiteSrc = footerGuideUrl['msiteSrcH']
          this.youhuiSrc = footerGuideUrl['youhuiSrc']
          this.faxainSrc = footerGuideUrl['faxainSrc']
        } else if (path == '/preferential') {
          this.msiteSrc = footerGuideUrl['msiteSrc']
          this.youhuiSrc = footerGuideUrl['youhuiSrcH']
          this.faxainSrc = footerGuideUrl['faxainSrc']
        } else if (path == '/discovery') {
          this.msiteSrc = footerGuideUrl['msiteSrc']
          this.youhuiSrc = footerGuideUrl['youhuiSrc']
          this.faxainSrc = footerGuideUrl['faxainSrcH']
        }
      }
    }
  }
</script>

<style scoped>

  .footer_guide {
    position: fixed;
    z-index: 100;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    width: 100%;
    display: flex;
  }

  .footer_guide .guide_item {
    display: flex;
    flex: 1;
    text-align: center;
    flex-direction: column;
    align-items: center;
    margin: 5px;
    color: #999999;
  }

  .footer_guide .guide_item img {
    width: 50%;
    height: 50%;
    margin-top: 10px;
    margin-bottom: 10px;
  }

</style>
